<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-container">
    <div class="layui-row" style="margin-left: 360px;margin-top: 150px">

        <div class="layui-form-item">
            <img src="../LayUiBac/img/rabit.jpg" style="width: 200px;height: 200px;margin-left: 100px">
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="username" required lay-verify="required"
                           placeholder="请输入你的用户名"
                           autocomplete="off" class="layui-input" width="300px">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realName" id="realName" required lay-verify="required"
                           placeholder="请输入你的用户名"
                           autocomplete="off" class="layui-input" width="300px">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" id="password1" required lay-verify="required"
                           placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">二次输入密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" id="password2" required lay-verify="required"
                           placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div id ="show" class="layui-form-item" style="visibility: hidden">
                <label class="layui-form-label">滑动验证</label>
                <div class="layui-input-inline">
                    <div id="slider"></div>
                </div>
            </div>

        </form>
    </div>
</div>
<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script>
    layui.use('slider', function () {
        let slider = layui.slider;
        let $ = layui.$;
        let flag = false;


        $('#password2').on('mouseleave', function () {
            if ($('#password2').val() !== $('#password1').val()) {
                alert("你的两次密码输入有误差,请重新输入");
                $('#password2').val("");
                $('#password1').val("");
            }else if($('#password2').val()===""||$('#password1').val()===""){
                alert("不能输入空的东西！");
            } else {
                flag = true;
                $('#show').css("visibility","visible")
                x;
            }
        })

      let x= layui.config({
            base: 'layui/'
        }).use(['sliderVerify', 'jquery', 'form'], function () {
            let sliderVerify = layui.sliderVerify,
                form = layui.form;
            let slider = sliderVerify.render({
                elem: '#slider',
                onOk: function () {//当验证通过回调
                    layer.msg("滑块验证通过");
                    if (flag === true) {
                        let str = "&username=" + $('#username').val() + "&password=" + $('#password1').val() + "&realName=" + $('#realName').val();
                        console.log(str)
                        $.ajax({
                            type: 'post'
                            , url: '/Trees/register?method=newUser' + str
                            , success: function (data) {
                                console.log(data)
                                alert(data);
                                if (data === '"Hello"') {
                                    window.location.href = "/Trees/LayUiBac/index.html";
                                }
                            }
                        })
                    }
                }
            })


            //监听提交
            let x = form.on('submit(formDemo)', function (data) {
                if (slider.isOk()) {//用于表单验证是否已经滑动成功
                    layer.msg(JSON.stringify(data.field));
                } else {
                    layer.msg("请先通过滑块验证");
                }
                return false;
            });
        })
    });
</script>


</body>
</html>